<template>
    <div>
        <!-- 面包屑指引 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 添加用户 -->
        <el-button type="success" @click="dialogFormVisible = true">添加用户</el-button>
        <!-- 渲染表格 -->
        <el-table :data="tabledata.todotable" stripe style="width: 100%">
            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="role_name" label="昵称" width="180" />
            <el-table-column prop="mobile" label="手机号码" />
            <el-table-column prop="email" label="邮箱" />
            <!-- 修改状态,利用插槽v-slot来访问子组件的值 -->
            <el-table-column prop="mg_state" label="状态">
                <template v-slot="scope">
                    <el-switch
                        @change="changedata(scope.row)"
                        v-model="scope.row.mg_state"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                    />
                </template>
            </el-table-column>
            <!-- 对数据的操作 -->
            <el-table-column label="操作">
                <template v-slot="scope">
                    <!-- 查找用户 -->
                    <el-button :icon="Search" circle size="mini" @click="look(scope.row)" />
                    <!-- 编辑用户 -->
                    <el-button
                        type="primary"
                        size="mini"
                        :icon="Edit"
                        circle
                        @click="addgrent(scope.row)"
                    />
                    <!-- 删除用户 -->
                    <el-button
                        type="danger"
                        :icon="Delete"
                        size="mini"
                        circle
                        @click="outuser(scope.row)"
                    />
                    <!-- 分配用户角色 -->
                    <el-button
                        type="warning"
                        :icon="Star"
                        circle
                        size="mini"
                        @click="assignmentusers(scope.row)
                        "
                    />
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页按钮的数据 -->
        <div class="Num">
            <el-pagination
                v-model:currentPage="tabledata.pageNum"
                v-model:page-size="tabledata.pageSize"
                :page-sizes="[2, 3, 4, 6]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tabledata.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <!-- 弹出框添加 -->
        <el-dialog title="添加用户" v-model="dialogFormVisible">
            <el-form :model="yesdata">
                <el-form-item label="用户名">
                    <el-input v-model="yesdata.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="yesdata.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="yesdata.mobile" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="yesdata.email" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addusers">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 查找用户的弹出框 -->
        <el-dialog title="查找用户" v-model="dialogFormsVisible">
            <el-form :model="lookinfo.lookfoin">
                <el-form-item label="用户名">
                    <el-input v-model="lookinfo.lookfoin.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="lookinfo.lookfoin.role_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="lookinfo.lookfoin.mobile" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="lookinfo.lookfoin.email" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 编辑用户信息 -->
        <el-dialog title="编辑用户" v-model="dialogFormeeVisible">
            <el-form :model="aggerent.bainji">
                <el-form-item label="用户名">
                    <el-input v-model="aggerent.bainji.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="aggerent.bainji.mobile" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="aggerent.bainji.email" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormeeVisible = false">取 消</el-button>
                <el-button type="primary" @click="bjusers">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 分配用户角色弹框 -->
        <el-dialog v-model="dialogVisible" title="分配用户角色" width="60%">
            <!-- 获取角色信息 -->
            <el-form v-model="Enit.adds">
                <!-- 每个用户信息 -->
                <el-form-item label="用户名">
                    <el-input v-model="Enit.adds.username" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 每个角色信息 -->
                <el-select v-model="Enit.roleId" placeholder="请选择">
                    <el-option
                        v-for="item in Enit.usersassignment"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消修改</el-button>
                    <el-button type="primary" @click="Eindusers">确认修改</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>

////////////////////////以下是引入的插件索要的内容/////////////////////////////
//导入面包屑的element-plus
import { ArrowRight, Search, Edit, Delete, Star } from '@element-plus/icons-vue'
//导入弹窗的element
import { ElMessage, ElMessageBox } from 'element-plus';

import { onMounted, reactive, ref } from 'vue';
//导入axios
import { requert } from '../requert/index'


////////////////////////////以下是所需要获取的数据存储的////////////////////////////////
//表格数据以及分页按钮
const tabledata = reactive({
    todotable: [],
    total: '',
    pageNum: 1,
    pageSize: 3
})

// 添加的数据
//设置弹窗的关闭
const dialogFormVisible = ref(false)
const yesdata = reactive({
    username: "",
    password: "",
    email: "",
    mobile: "",
})

// 获取查找用户信息数据
const dialogFormsVisible = ref(false)
let lookinfo: any = reactive({
    lookfoin: {}
})

// 修改用户信息的数据
const dialogFormeeVisible = ref(false)
const aggerent: any = reactive({
    bainji: {}
})
// 分配用户角色数据
const dialogVisible = ref(false)
const Enit: any = reactive({
    //获取每个用户用对象
    adds: {},
    //获取每个用户的角色信息，用数组
    usersassignment: [],
    //角色的id
    roleId: ''
})

///////////////////////////////////以下是方法//////////////////////////////////
//修改(分配)用户角色
const Eindusers = async function () {
    let { data } = await requert.put(`/users/${Enit.adds.id}/role`, { rid: Enit.roleId })
    console.log(data);
    dialogVisible.value = false;
    if (data.meta.status == 200) {
        ElMessage({
            message: data.meta.msg,
            type: "success",
        })
        Usersdata(1, tabledata.pageSize)
    } else {
        ElMessage({
            type: "warning",
            message: "设置用户角色失败",
        })
    }
}

// 获取用户以及角色信息
const assignmentusers = async function (userfoin) {
    //获取用户数据，获取到的是仓库的数据
    Enit.adds = userfoin
    //弹出框出现
    dialogVisible.value = true;
    //获取角色信息
    let { data } = await requert.get('/roles')
    console.log(data);
    Enit.usersassignment = data.data;
}
//删除用户
const outuser = function (rows) {
    ElMessageBox.confirm(
        '你爱我吗？宝',
        'Warning',
        {
            confirmButtonText: '当然',
            cancelButtonText: '不要',
            type: 'warning',
        }
    )
        //处理成功就发起请求去删除
        .then(async () => {
            let { data } = await requert.delete('/users/' + rows.id)
            console.log(data);
            //判断它的状态，成功就删除
            if (data.meta.status == 200) {
                ElMessage({
                    type: 'success',
                    message: data.meta.msg,
                })
                //调用公用函数刷新页面
                Usersdata(1, tabledata.pageSize)
                //失败就抛出错误
            } else {
                ElMessage({
                    type: 'info',
                    message: '删除失败了？宝',
                })
            }
        })
}
//修改用户信息
const bjusers = async function () {
    let { data } = await requert.put('users/' + aggerent.bainji.id, aggerent.bainji)
    if (data.meta.status == 200) {
        ElMessage({
            message: data.meta.msg,
            type: 'success',
        })
        dialogFormeeVisible.value = false;
        Usersdata(1, tabledata.pageSize)
    } else {
        ElMessage({
            message: data.meta.msg,
            type: 'warning',
        })
    }
}

//获取修改用户信息
const addgrent = async function (rows) {
    dialogFormeeVisible.value = true;
    let { data } = await requert.get('users/' + rows.id);
    console.log(data);
    aggerent.bainji = data.data
}

//获取查找用户信息
const look = async function (rows) {
    dialogFormsVisible.value = true
    const { data } = await requert.get('users/' + rows.id)
    console.log(data);
    lookinfo.lookfoin = data.data
}

//修改用户状态，修改请求
const changedata = async function (rows) {
    console.log(rows);
    let { data } = await requert.put(`/users/${rows.id}/state/${rows.type}`)
    console.log(data);
    if (data.meta.status == 200) {
        ElMessage({
            message: data.meta.msg,
            type: "success",
        })
    } else {
        //如果错误，就把状态返回当时的状态
        rows.mg_state = !rows.mg_state
        ElMessage({
            message: data.meta.msg,
            type: "warning",
        })
    }
}

//添加用户,进行传参，判断状态
const addusers = async function () {
    let { data } = await requert.post('/users', yesdata)
    if (data.meta.status == 201) {
        ElMessage({
            message: data.meta.msg,
            type: 'success',
        })
        //关闭弹窗
        dialogFormVisible.value = false;
        //调佣公用函数进行页面刷新
        Usersdata(1, tabledata.pageSize)
    } else {
        ElMessage({
            message: "添加失败了，哥",
            type: 'warning',
        })
    }
}
// 公用的获取用户信息列表的函数，页面阿加载和分页调用。也可以调用用作刷新
const Usersdata = async function (pagenum, pagesize) {
    let { data } = await requert.get(`/users?pagenum=${pagenum}&pagesize=${pagesize}`)
    console.log(data);
    if (data.meta.status == 200) {
        ElMessage({
            message: data.meta.msg,
            type: 'success',
        })
        tabledata.todotable = data.data.users
        tabledata.total = data.data.total
    } else {
        ElMessage({
            message: "获取失败了，大傻逼",
            type: 'warning',
        })
    }
}

// 分页按钮,页面跳转显示的页数和条数
const handleSizeChange = function (pagesize) {
    Usersdata(1, pagesize)
}

//分页按钮，每页显示的页数和规定的条数
const handleCurrentChange = function (pagenum) {
    Usersdata(pagenum, tabledata.pageSize)
}

//页面加载调用公用函数，显示数据
onMounted(async () => {
    Usersdata(1, 3)
})
</script>

<style>
.Num {
    position: absolute;
    right: 20px;
}
</style>